<template>
	<div>
		<div class="registermain">
			<div class="registimg"></div>
			<div class="registcon">
				<div class="sameregist">
					<i class="sameregimg userimg"></i>
					<input type="text" class="sameinput" placeholder="请输入手机号" ref="phone" maxlength="11">
				</div>

				<div class="sameregist">
					<i class="sameregimg verfimg"></i>
					<input type="text" class="sameinput verfcode" placeholder="请输入验证码" ref="codefont">
					<div v-show="show" class="verfibut" @click="getCode">验证码</div>
					<div v-show="!show" class="verfibut">{{count}} s</div>
				</div>
				<div class="sameregist">
					<i class="sameregimg verfimg"></i>
					<input type="password" class="sameinput" placeholder="请输入8-16位的密码" ref="passwords">
				</div>
				<div class="registbut" @click="registbutton">注册</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				count: '',
				timer: null,
				show: true,
				listjson:[],
				newjson:[]
			}
		},
		created() {

		},
		methods: {
			getCode() {
				const TIME_COUNT = 60;
				if(!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
				var phone = this.$refs.phone.value;
				var url = BaseUrl+'login/code?phone=' + phone;
				this.$http.get(url).then(res => {

					this.listjson = res;

				}).catch(error=>{
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})

			},
			registbutton:function(){
				var passwords = this.$refs.passwords.value;
				var phone = this.$refs.phone.value;
				var codefont = this.$refs.codefont.value;
//				console.log(passwords,phone,codefont);
				var url = BaseUrl + "login/reg?userPhone="+phone+'&userPwd='+passwords+'&code='+codefont+'&openid=gzh'
				this.$http.get(url).then(res => {
//					console.log(res);
					this.newjson = res;

				}).catch(error=>{
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
			
			}
		}
	}
</script>

<style scoped="scoped">
	.registermain {
		width: 100%;
	}
	
	.registimg {
		width: 100%;
		height: 4.8rem;
		background: red;
	}
	
	.registcon {
		padding: 0.3rem;
		background-color: #fff;
	}
	
	.sameregist {
		width: 100%;
		height: 0.9rem;
		border-bottom: solid 0.01rem #CCCCCC;
	}
	
	.sameregimg {
		width: 0.28rem;
		height: 0.27rem;
		display: inline-block;
		background-color: red;
		margin-top: 0.25rem;
		position: relative;
		top: 0.1rem;
	}
	
	.sameinput {
		width: 80%;
		height: 0.7rem;
		line-height: 0.7rem;
		outline: none;
		color: #323232;
		font-size: 0.28rem;
		margin-left: 0.2rem;
		display: inline-block;
	}
	
	.verfcode {
		width: 60%;
	}
	
	.userimg {
		background: url(../assets/personicon.png);
		background-size: 100%;
	}
	
	.verfimg {
		background: url(../assets/lockicon.png);
		background-size: 100% 100%;
	}
	
	.verification1 {
		width: 0.8rem;
		height: 0.4rem;
		line-height: 0.4rem;
	}
	/******验证码******/
	
	.verfibut {
		padding: 0.03rem 0.1rem;
		border: solid 0.01rem #FF2040;
		display: inline-block;
		float: right;
		margin-top: 0.2rem;
		text-align: center;
		color: #ff2040;
	}
	
	.registbut {
		width: 100%;
		height: 0.8rem;
		background-color: #FF2040;
		border-radius: 0.4rem;
		color: #FFFFFF;
		text-align: center;
		font-size: 0.32rem;
		line-height: 0.8rem;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
</style>